<template>
  <div class="front serve">
    <div class="header-box">
      <Header :searchContent = this.$route.query.name$lk @updateSearchContent="updateSearchContent"></Header>
    </div>

    <div class="goods">
      <!-- <div class="mianbao">
        <span class="btn hover" @click="$router.push('/front-home')">首页</span>
        <template v-if="categoryOne.id">
          <span>></span>
          <span class="btn hover" @click="selectOne(categoryOne)">{{categoryOne.name}}</span>
        </template>
        <template v-if="categoryTwo.id">
          <span>></span>
          <span class="btn hover" @click="selectTwo(categoryTwo)">{{categoryTwo.name}}</span>
        </template>
      </div>-->
      <div class="category">

        <div class="item">
          <span>分类：</span>
          <ul>
            <li :class="firstId==0?'active':''" @click="selectOne({id:0})">全部</li>
            <li :class="itemOne.id==firstId?'active':''" v-for="(itemOne) in  categoryOneList" :key="itemOne.id"
              @click="selectOne(itemOne)">{{itemOne.name}}</li>
          </ul>
        </div>
        <div class="item" v-if="this.firstId !=0">
					<span>二级分类：</span>
					<ul>
						<!-- <li :class="twoId==0?'active':''" @click="selectTwo({id:0})">全部</li> -->
						<li :class="itemTwo.id==twoId?'active':''" v-for="(itemTwo) in  categoryTwoList"
							@click="selectTwo(itemTwo)" :key="itemTwo.id">{{itemTwo.name}}</li>
					</ul>
				</div>
        <!-- <div class="item" v-if="this.twoId !=0">
        	<span>三级分类：</span>
        	<ul>
        		<li :class="itemTwo.id==twoId3?'active':''" v-for="(itemTwo) in  categoryTwoList2"
        			@click="selectTwo3(itemTwo)" :key="itemTwo.id">{{itemTwo.name}}</li>
        	</ul>
        </div> -->
        <!-- 品牌 -->
        <!-- <div class="item" v-if="categoryTwoList[0]">
           <span>{{categoryTwoList[0].name}}：</span>
           <ul>
             <li :class="itemTwo.id == twoId ? 'active':''" v-for="(itemTwo) in  categoryTwoList[0].children"
               :key="itemTwo.id" @click="selectTwo(itemTwo)">{{itemTwo.name}}</li>
           </ul>
         </div> -->
         <!-- 工艺 -->
         <!-- <div class="item" v-if="categoryTwoList[1]">
           <span>{{categoryTwoList[1].name}}：</span>
           <ul>
             <li :class="itemTwo.id == twoId1 ? 'active':''" v-for="(itemTwo) in  categoryTwoList[1].children"
               :key="itemTwo.id" @click="selectTwo1(itemTwo)">{{itemTwo.name}}</li>
           </ul>
         </div> -->
         <!-- 形状 -->
         <!-- <div class="item" v-if="categoryTwoList[2]">
           <span>{{categoryTwoList[2].name}}：</span>
           <ul>
             <li :class="itemTwo.id == twoId2 ? 'active':''" v-for="(itemTwo) in  categoryTwoList[2].children"
               :key="itemTwo.id" @click="selectTwo2(itemTwo)">{{itemTwo.name}}</li>
           </ul>
         </div> -->
      </div>

      <div class="sort">
        <ul>
          <li :class="defaultColor?'active':''" @click="changeSort()">综合排序</li>
          <li @click="changeSort(1,listQuery.saleNum$sort)">
            销量
            <span>
              <i size="16px" class="el-icon-caret-top" :class="listQuery.saleNum$sort=='asc'?'active':''"></i>
              <i size="16px" class="el-icon-caret-bottom" :class="listQuery.saleNum$sort=='desc'?'active':''"></i>
            </span>
          </li>
          <li @click="changeSort(2,listQuery.createTime$sort)">
            时间
            <span>
              <i class="el-icon-caret-top" :class="listQuery.createTime$sort=='asc'?'active':''"></i>
              <i class="el-icon-caret-bottom" :class="listQuery.createTime$sort=='desc'?'active':''"></i>
            </span>
          </li>
          <li @click="changeSort(3,listQuery.price$sort)">
            价格
            <span>
              <i class="el-icon-caret-top" :class="listQuery.price$sort=='asc'?'active':''"></i>
              <i class="el-icon-caret-bottom" :class="listQuery.price$sort=='desc'?'active':''"></i>
            </span>
          </li>
        </ul>
        <div class="PriceScreenin">
          <el-input v-model="listQuery.price$gte" placeholder="￥" style="width: 120px;margin: 3px 0;" clearable>
          </el-input>
          <div style="padding: 0 5px;color: #666;">—</div>
          <el-input v-model="listQuery.price$lte" placeholder="￥" style="width: 120px;" clearable></el-input>
          <el-button style="background-color:#965f29;color: #fff;margin-left: 5px;" @click="screen">筛选</el-button>
        </div>
      </div>
      <GoodList :list="list" @handleDetail="toDetail"></GoodList>
      <Pagination :pageNo.sync="listQuery.pageNo" :pageSize.sync="listQuery.pageSize" :total="total"
        @change="getProduct()" />
    </div>

    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import {productPageByQo,pageVoByQo} from "@/api/front-home.js";
  import Footer from "@/views/front/components/Footer";
  import Header from "@/views/front/components/Header";
  import Pagination from "@/views/front/components/Pagination";
  import GoodList from "@/views/front/shop/components/GoodList";
  export default {
    data() {
      return {
        list: [],
        listQuery: {
          pageNo: 1,
          pageSize: 20,
          memberId: 0,
          createTime$sort: "",
          saleNum$sort: "",
          price$sort: "",
          name$lk: "",
          categoryId: "",
          categoryIds$lk: '',
          price$gte:'',
          price$lte:'',
          auditStatus:1
        },
        total: 0,
        categoryOne: {},
        categoryTwo: {},
        categoryOneList: [],
        categoryTwoList: [],
        categoryTwoList2:[],
        currentIndex: 0,
        firstId: 0,
        twoId: '',
        twoId3:0,
        type: 1 //0(供应端)，1（销售端)
      };
    },
    async created() {
      // let obj = JSON.parse(localStorage.getItem("xxxx-OBJ"));
      // if (obj && obj.first) {
      //   this.categoryOne = obj.first;
      //   this.firstId = this.categoryOne.id;
      // }
      // if (obj && obj.child) {
      //   this.categoryTwo = obj.child;
      //   this.twoId = this.categoryTwo.id;
      // }
      this.type = this.$route.query.type;
      this.listQuery.name$lk = this.$route.query.name$lk || "";
      await this.pageVoByQo();
      // 不等于0 显示二级分类
      if (this.firstId != 0) {
        this.setAllTwoList();
      }


      // 设置默认的二级的分类
      // if (this.categoryOneList && this.categoryOneList.length) {
      //   if (!this.firstId) {
      //     this.firstId = this.categoryOneList[0].id;
      //   }
      //   let resultFilter = this.categoryOneList.filter(ele => {
      //     return ele.id == this.firstId;
      //   });
      //   if (resultFilter && resultFilter.length) {
      //     this.categoryTwoList = resultFilter[0].children;
      //   }
      // }
      this.getProduct();

      // 从首页过来的
      if (this.$route.query.item) {
        this.selectOne(this.$route.query.item)
      }
    },
    destroyed() {
      localStorage.removeItem("xxxx-OBJ");
    },
    components: {
      Footer,
      Header,
      Pagination,
      GoodList
    },
    computed: {
      ...mapGetters(["userInfo", 'token']),
      defaultColor() {
        if (this.listQuery.createTime$sort == "" &&this.listQuery.saleNum$sort == "" &&this.listQuery.price$sort == "") {
          return true;
        } else {
          return false;
        }
      }
    },
    inject: ['reload'],//引入
    watch: {
      $route(to, from) {
        this.listQuery.name$lk = to.query.name$lk;
        this.type = to.query.type;
        this.categoryTwoList = [];
        this.pageVoByQo().then(res => {
          this.reload();//刷新
          if (this.categoryOneList && this.categoryOneList.length) {
            // this.firstId = this.categoryOneList[0].id;
            let resultFilter = this.categoryOneList.filter(ele => {
              return ele.id == this.firstId;
            });
            if (resultFilter && resultFilter.length) {
              this.categoryTwoList = resultFilter[0].children;
            }
          }
        });
      },
      firstId(val) {
        // this.updateFirstId(val)
      },
      twoId(val) {
        this.getProduct();
      },
      twoId3(val) {
        this.getProduct();
      },
    },
    methods: {
      updateFirstId(val) {
        // 清空
        this.twoId = ''
        this.twoId3 = '';
        this.categoryTwoList = [];

        if (val == 0) {
          this.setAllTwoList();
        } else {
          let resultFilter = this.categoryOneList.filter(ele => {
            return ele.id == val;
          });
          if (resultFilter && resultFilter.length && resultFilter[0].children) {
            this.categoryTwoList = resultFilter[0].children;
          }
        }
        this.getProduct();
      },
      updateSearchContent(val) {
        this.listQuery.name$lk = val || "";
      },
      //价格筛选
      screen(){
        this.getProduct();
      },
      init() {},
      // 为0 的时候的商品列表
      setAllTwoList() {
        let newArr = [];
        this.categoryOneList.forEach(ele => {
          if (ele.children && ele.children) newArr = newArr.concat(ele.children);
        });
        this.categoryTwoList = newArr;
      },
      // 获取商品列表
      getProduct() {

        // if (this.twoId) {
        //   this.listQuery.categoryId = this.twoId;
        // } else {
        //   this.listQuery.categoryId = this.firstId;
        // }

        if (this.twoId){
          this.listQuery.categoryId = this.twoId;
        } else {
           this.listQuery.categoryId = this.firstId;
        }
        
        if (this.listQuery.categoryId.toString() === "0") {
          this.listQuery.categoryId = "";
        }

        productPageByQo(this.listQuery).then(res => {
          this.list = res.list || [];
          this.total = res.totalCount;
        });
      },
      // 获取商品分类列表
      pageVoByQo() {
        return new Promise((resolve, reject) => {
          pageVoByQo({
              companyType: 1
            })
            .then(res => {
              this.categoryOneList = res;
              resolve(res);
            })
            .catch(err => {
              reject(err);
            });
        });
      },
      selectOne(item) {
        // console.log('一级：',item.id);
        this.firstId = item.id;
        this.updateFirstId(this.firstId)
      },
      selectTwo(item) {
        // console.log('二级：',item.id);
        this.twoId = item.id;
        this.categoryTwoList2 = item.children
      },
      selectTwo3(item){
        // console.log('三级：',item.id);
        this.twoId3 = item.id;
      },
      // selectTwo1(item) {
      //   console.log(item.id);
      //   this.twoId1 = item.id;
      // },
      // selectTwo2(item) {
      //   console.log(item.id);
      //   this.twoId2 = item.id;
      // },

      // changeTime() {
      //   if (this.listQuery.createTime$sort == "asc") {
      //     this.listQuery.createTime$sort = "desc";
      //   } else {
      //     this.listQuery.createTime$sort = "asc";
      //   }
      //   this.getProduct();
      // },
      // changeSale() {
      //   if (this.listQuery.saleNum$sort == "asc") {
      //     this.listQuery.saleNum$sort = "desc";
      //   } else {
      //     this.listQuery.saleNum$sort = "asc";
      //   }
      //   this.getProduct();
      // },
      // changePrice() {
      //   if (this.listQuery.price$sort == "asc") {
      //     this.listQuery.price$sort = "desc";
      //   } else {
      //     this.listQuery.price$sort = "asc";
      //   }
      //   this.getProduct();
      // },
      // changeDefault() {
      //   this.listQuery.price$sort = "";
      //   this.listQuery.saleNum$sort = "";
      //   this.listQuery.createTime$sort = "";
      //   this.getProduct();
      // },
      changeSort(changeType, sort) {
        this.listQuery.price$sort = "";
        this.listQuery.saleNum$sort = "";
        this.listQuery.createTime$sort = "";
        switch (changeType) {
          case 1:
            this.listQuery.saleNum$sort = sort && sort === "asc" ? "desc" : "asc";
            break;
          case 2:
            this.listQuery.createTime$sort =
              sort && sort === "asc" ? "desc" : "asc";
            break;
          case 3:
            this.listQuery.price$sort = sort && sort === "asc" ? "desc" : "asc";
            break;

          default:
            break;
        }
        this.getProduct();
      },
      toDetail(goodItem) {
        // this.$router.push({
        //   path: "/front-shop/productDetail",
        //   query: {
        //     id: goodItem.gongyingId,
        //     productId: goodItem.id
        //   }
        // });

        //新建窗口打开
        const { href } = this.$router.resolve({
          path: "/front-shop/productDetail",
          query: {
            id: goodItem.gongyingId,
            productId: goodItem.id
          }
        });
        window.open(href, '_blank');
      }
    }
  };
</script>
<style scoped>
  [class^="el-icon-"],
  [class*=" el-icon-"] {
    line-height: 0.5;
  }
</style>
<style lang="scss" scoped>
  .serve {
    .goods {
      width: 1200px;
      margin: 0 auto;

      .mianbao {
        height: 80px;
        line-height: 80px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #000000;
      }

      .category {
        width: 100%;
        border: 1px solid #e6e6e6;
        padding: 23px;
        margin-top: 20px;

        .item {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          >span {
            line-height: 40px;
            flex-shrink: 0;
          }
          ul {
            // width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 0;
            li {
              cursor: pointer;
              // height: 40px;
              // line-height: 40px;
              margin: 0 34px;

              &.active {
                // color: #a60304;
                color: #FFFFFF;
                background-color: #0f83c0;
                padding: 5px;
              }
            }
          }
        }
      }

      .sort {
        display: flex;
        // justify-content: center;
        align-items: center;
        margin: 20px auto;
        background: #f6f6f6;
        padding-left: 10px;

        .active {
          color: #a60304;
        }

        >ul {
          display: flex;
          align-items: center;
          margin-bottom: 0;

          li {
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            width: 108px;
            height: 31px;
            line-height: 31px;
            border: 1px solid #e6e6e6;

            >span {
              i {
                display: block;

                &.active {
                  color: #a60304;
                }
              }
            }
          }
        }

        .PriceScreenin {
          display: flex;
          align-items: center;
          margin-left: 100px;
        }
      }
    }
  }
</style>
